<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<!-- Bootstrap -->
	<link href="css/bootstrap.min.css" rel="stylesheet" media="screen">
	<link href="css/bootstrap-responsive.css" rel="stylesheet">
	<style>
	.show-grid{ margin-bottom: 20px;
    margin-top: 10px;}
    .show-grid [class*="span"] {
    background-color: #ccc;
    border-radius: 3px 3px 3px 3px;
    line-height: 40px;
    min-height: 40px;
    text-align: center;
	}
	</style>
</head>
<body>
	<!-- 导航 -->
	<div class="nav">ss</div>
	<div id="wrap" class="container-fluid">
		<div class="row-fluid">
			<div class="span12"><h1>Hello, world!</h1></div>
		</div>
		<div class="row-fluid show-grid">
			<div class="span1">1</div>
			<div class="span1">1</div>
			<div class="span1">1</div>
			<div class="span1">1</div>
			<div class="span1">1</div>
			<div class="span1">1</div>
			<div class="span1">1</div>
			<div class="span1">1</div>
			<div class="span1">1</div>
			<div class="span1">1</div>
			<div class="span1">1</div>
			<div class="span1">1</div>
		</div>
		<div class="row-fluid show-grid">
			<div class="span2">2</div>
			<div class="span2">2</div>
			<div class="span2">2</div>
			<div class="span2">2</div>
			<div class="span2">2</div>
			<div class="span2">2</div>
		</div>
		<div class="row-fluid show-grid">
			<div class="span3">3</div>
			<div class="span3">3</div>
			<div class="span3">3</div>
			<div class="span3">3</div>
		</div>
		<div class="row-fluid show-grid">
			<div class="span4">4</div>
			<div class="span4">4</div>
			<div class="span4">4</div>
		</div>
		<div class="row-fluid show-grid">
			<div class="span5">5</div>
			<div class="span5">5</div>
			<div class="span2">2</div>
		</div>
		<div class="row-fluid show-grid">
			<div class="span6">6</div>
			<div class="span6">6</div>
		</div>
		<div class="row-fluid show-grid">
			<div class="span7">7</div>
			<div class="span5">5</div>
		</div>
		<div class="row-fluid show-grid">
			<div class="span8">8</div>
			<div class="span4">4</div>
		</div>
		<div class="row-fluid show-grid">
			<div class="span9">9</div>
			<div class="span3">3</div>
		</div>
		<div class="row-fluid show-grid">
			<div class="span10">10</div>
			<div class="span1">1</div>
			<div class="span1">1</div>
		</div>
		<div class="row-fluid show-grid">
			<div class="span11">11</div>
			<div class="span1">1</div>
		</div>
		<div class="row-fluid show-grid">
			<div class="span12">12</div>
		</div>
		<div class="row-fluid">
			<div class="span4">
				<h1>Hello, world!</h1>
			</div>
			<div class="span8">
				<h1>Hello, world!</h1>
				<p>
					hello
					<a href="#">atchor</a>
				</p>
				<p>
					<div class="input-append">
							<input type="text">						
							<div class="btn-group">
								<button tabindex="-1" class="btn">Action</button>
								<button tabindex="-1" data-toggle="dropdown" class="btn dropdown-toggle">
									<span class="caret"></span>
								</button>
								<ul class="dropdown-menu">
									<li>
										<a href="#">Action</a>
									</li>
									<li>
										<a href="#">Another action</a>
									</li>
									<li>
										<a href="#">Something else here</a>
									</li>
									<li class="divider"></li>
									<li>
										<a href="#">Separated link</a>
									</li>
								</ul>
							</div>
						</div>
				</p>
				<p>
						<form action="">
							<div class="input-prepend input-append">
							<div class="btn-group">
								<button tabindex="-1" class="btn">UserName</button>
								<button class="btn dropdown-toggle" data-toggle="dropdown">
								<span class="caret"></span>
								</button>
								<ul class="dropdown-menu">
									<li>
										<a>CardID</a>
									</li>
									<li>
										<a>NumberID</a>
									</li>
								</ul>
							</div>
							<input type="text" name="email-p" value="hotmail" />
							<span class="add-on">@</span>
							<input type="text" name="email-r" value="163" />
							<div class="btn-group">
								<button class="btn dropdown-toggle" data-toggle="dropdown">.com
								<span class="caret"></span>
								</button>
								<ul class="dropdown-menu">
									<li>
										<a>.com</a>
									</li>
									<li>
										<a>.cn</a>
									</li>
									<li>
										<a>.net</a>
									</li>
									<li class="divider"></li>
									<li>
										<a>other</a>
									</li>
								</ul>
							</div>
							</div>
						</form>
						
					</p>
					<p>
						    <form class="form-search">
    <div class="input-append">
    <input type="text" class="span8 search-query">
    <button type="submit" class="btn">Search</button>
    </div>
    <div class="input-prepend">
    <button type="submit" class="btn">Search</button>
    <input type="text" class="span8 search-query">
    </div>
    </form>
					</p>
			</div>
		</div>
	</div>
	<!-- 页脚-->
	<div id="footer">
		<div class="container-fluid">
			<div class="row-fluid">
				<div class="span12">
					<h1>Hello, world!</h1>
				</div>
			</div>
		</div>
	</div>
	<script src="js/jquery.min.js"></script>
	<script src="js/bootstrap.min.js"></script>
</body>
</html>